#主页
<template>
  <v-main>
    <div>
    <Biaoti chart-width="800px" chart-height="100px" />
  </div>
    <div ref="refVideo" class="position-relative">
      <video-player
        src="src/assets/index/bg.mp4"
        poster="src/assets/logo.png"
        crossorigin="anonymous"
        autoplay="muted"
        :loop="true"
        fluid
      />
      <div id="join-us" ref="refJoinUs">
        <v-img
          :width="500"
          src="@/assets/index/welcome.png"
        ></v-img>
      </div>
    </div>




    <v-card class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4 h-screen" color="black">
      <div id="text-body">
        <h2 id="work-in">在 VoVe </h2>

        <p id="work-us">
          <span role="term" aria-label="加入我们的团队，在工作中相互成就。">
            <span class="gradient-cool">为您量身定制的职业之路</span>
          </span>
        </p>
        <div class="body-container">
          <p class="t-body-1">
            AI赋能，让最适合的岗位主动找上您 ；精准岗位推荐，只因了解您更深 ；助力职业规划，让每一步都迈向心仪岗位；行业洞察，热门领域岗位一手掌握。精准推荐，助您先人一步
          </p>
        </div>
      </div>
    </v-card>


    <v-card class="d-flex justify-center align-center h-screen"
            image="@/assets/index/background.png">
      <p class="t-hero-headline" tabindex="-1">
        为大学生和招聘企业搭建桥梁，为大学生就业迈出坚实的第一步
      </p>
    </v-card>

    <v-sheet>

      <h2 class="t-hero-headline mx-auto mt-15" style="color: #333333">
        <span aria-label="在这里，发挥影响力的方式多种多样。">
          在VoVe，<span class="gradient-full">您能发现最热门、最有用、最全面的信息</span>
        </span>
      </h2>


      <v-sheet
        class="mt-15"
        elevation="8"
      >
        <v-slide-group
          class="pa-4"
          selected-class="bg-success"
          show-arrows
        >
          <v-slide-group-item>
            <v-card
              class="grey-lighten-1 mx-auto"
              width="850px"
            >
            <div class="hotwork-container">
        <Hotwork />
            </div>

              <v-card-title style="text-align: center">
                <h3 class="card-font-title">
                  热门职位
                </h3>
              </v-card-title>
            </v-card>
          </v-slide-group-item>



          <v-slide-group-item>
            <v-card
              class="grey-lighten-1 mx-4"
              width="850px"
            >
            <div class="hotwork-container">
              <Hotskill></Hotskill>
            </div>
              <v-card-title style="text-align: center">
                <h3 class="card-font-title">
                  热门技能
                </h3>
              </v-card-title>
            </v-card>
          </v-slide-group-item>


          <v-slide-group-item>
            <v-card
              class="grey-lighten-1 mx-4"
              width="850px"
            >
            <div >
              <Hotcourse></Hotcourse>
            </div>
              <v-card-title style="text-align: center">
                <h3 class="card-font-title">
                  热门专业
                </h3>
              </v-card-title>
            </v-card>
          </v-slide-group-item>

          <v-slide-group-item>
            <v-card
              class="grey-lighten-1 mx-4"
              width="850px"
              @click="getneo()"
            >
            <div style="height: 500px;"
            >
              <v-img
                class="align-end text-white"
                src="@/assets/index/zhishitupu.jpg"
              >
              </v-img>
              </div>
              <v-card-title style="text-align: center">
                <h3 class="card-font-title">
                  详细的知识图谱
                </h3>
              </v-card-title>
            </v-card>
          </v-slide-group-item>

        </v-slide-group>
      </v-sheet>
    </v-sheet>


    <v-sheet>
      <div class="mt-15">
        <h2 class="values-3 mx-auto">
            <span>
              VoVe的项目精神，<span class="gradient-full">贯穿于</span>这里的方方面面。
            </span>
        </h2>
      </div>

      <v-container class="mt-5">
        <v-row
          align="center"
        >
          <v-col>
            <v-card
              class="card-normal mx-auto card-max-height"
              theme="dark"
            >
              <v-card-item>
                <v-card-title>
                  <h3 class="card-font-title">
                    辅助功能
                  </h3>
                </v-card-title>
              </v-card-item>
              <div style="margin-top: 30%;margin-left: 5%">
                <p style="font-size: 26px">
                  真正强大的科技，应该是让每一个人都能使用的科技。
                </p>
              </div>
            </v-card>
          </v-col>
          <v-col>
            <v-card
              class="card-normal mx-auto card-max-height"
              theme="dark"
            >
              <v-card-item>
                <v-card-title>
                  <h3 class="card-font-title">
                    环境
                  </h3>
                </v-card-title>
              </v-card-item>
              <div style="margin-top: 30%;margin-left: 5%">
                <p style="font-size: 26px">
                  我们的目标是为世界留下更美好的印记。
                </p>
              </div>
            </v-card>
          </v-col>
        </v-row>
        <v-row
          align="center"
        >
          <v-col>
            <v-card
              class="card-normal mx-auto card-max-height"
              theme="dark"
            >
              <v-card-item>
                <v-card-title>
                  <h3 class="card-font-title">
                    隐私
                  </h3>
                </v-card-title>
              </v-card-item>
              <div style="margin-top: 30%;margin-left: 5%">
                <p style="font-size: 26px">
                  我们在设计产品时致力于保护你的隐私，并让你全权掌控自己的信息。
                </p>
              </div>
            </v-card>
          </v-col>
          <v-col>
            <v-card
              class="card-normal mx-auto card-max-height"
              theme="dark"
            >
              <v-card-item>
                <v-card-title>
                  <h3 class="card-font-title">
                    供应商责任
                  </h3>
                </v-card-title>
              </v-card-item>
              <div style="margin-top: 30%;margin-left: 5%">
                <p style="font-size: 26px">
                  我们坚定地认为，每个人都应拥有一个安全、有尊严、受到支持的工作环境。
                </p>
              </div>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-sheet>
  </v-main>
</template>

<script lang="ts" setup>
import {VideoPlayer} from '@videojs-player/vue'
import 'video.js/dist/video-js.css'
import '@/styles/index.scss'
import {onMounted, reactive, ref} from "vue";
import scrollReveal from "scrollReveal"

import Biaoti from '@/components/Biaoti.vue';
import Hotwork from '@/components/Hotwork';
import Hotskill from '@/components/Hotskill';
import Hotcourse from '@/components/Hotcourse';
import func from '../../../vue-temp/vue-editor-bridge';



/*
  scrollReveal对象引入
 */
const scrollRevealObj = reactive({
  scrollReveal: scrollReveal()
})
const retScroll = () => {
  const bottomOut = {
    // 动画的时长
    duration: 1000,
    // 延迟时间
    delay: 300,
    // 动画开始的位置，'bottom', 'left', 'top', 'right'
    origin: 'bottom',
    // 回滚的时候是否再次触发动画
    reset: true,
    // 在移动端是否使用动画
    mobile: true,
    // 滚动的距离，单位可以用%，rem等
    distance: '50px',
    // 其他可用的动画效果
    opacity: 0.001,
    // 执行速度 线性函数啥的
    easing: 'ease-out',
    // 执行方式（缩放）
    scale: 0.85,
  }

  const topOut = {
    // 动画的时长
    duration: 1000,
    // 延迟时间
    delay: 300,
    // 动画开始的位置，'bottom', 'left', 'top', 'right'
    origin: 'top',
    // 回滚的时候是否再次触发动画
    reset: true,
    // 在移动端是否使用动画
    mobile: true,
    // 滚动的距离，单位可以用%，rem等
    distance: '70px',
    // 其他可用的动画效果
    opacity: 0.001,
    // 执行速度 线性函数啥的
    easing: 'ease-out',
    // 执行方式（缩放）
    scale: 0.85,
  }

  const leftOut = {
    // 动画的时长
    duration: 1000,
    // 延迟时间
    delay: 300,
    // 动画开始的位置，'bottom', 'left', 'top', 'right'
    origin: 'left',
    // 回滚的时候是否再次触发动画
    reset: true,
    // 在移动端是否使用动画
    mobile: true,
    // 滚动的距离，单位可以用%，rem等
    distance: '50px',
    // 其他可用的动画效果
    opacity: 0.001,
    // 执行速度 线性函数啥的
    easing: 'ease-out',
    // 执行方式（缩放）
    scale: 0.85,
  }

  const cardEffect = {
    // 动画的时长
    duration: 1000,
    // 延迟时间
    delay: 300,
    // 动画开始的位置，'bottom', 'left', 'top', 'right'
    origin: 'left',
    // 回滚的时候是否再次触发动画
    reset: false,
    // 在移动端是否使用动画
    mobile: true,
    // 滚动的距离，单位可以用%，rem等
    distance: '70px',
    // 其他可用的动画效果
    opacity: 0.001,
    // 执行速度 线性函数啥的
    easing: 'ease-out',
    // 执行方式（缩放）
    scale: 0.85,
  }

  scrollRevealObj.scrollReveal.reveal('#work-in', bottomOut)
  scrollRevealObj.scrollReveal.reveal('#work-us', bottomOut)
  scrollRevealObj.scrollReveal.reveal('.t-body-1', bottomOut)
  scrollRevealObj.scrollReveal.reveal('.t-hero-headline', topOut)
  scrollRevealObj.scrollReveal.reveal('.card-normal', cardEffect)
  scrollRevealObj.scrollReveal.reveal('.values-3', leftOut)
}

/**
 * 解决从别的页面路由回来滚轮在上个页面的位置的问题
 */
const scrollToTop = () => window.scrollTo(0, 0)

onMounted(() => {
  // 挂载滚动效果事件
  retScroll();
  scrollToTop()
})



function getneo(){
  window.location.href = "../../neo4j_vision.html?_ijt=itfjn23l8tj746aj1hvcoplham&_ij_reload=RELOAD_ON_SAVE";
}


</script>


<style>
.hotwork-container {
  display: flex;
  justify-content: center;
}
</style>
